<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <style>
        * { margin: 0; padding: 0;}
        body { font-size: 100%;}
        h1, h2, h3, h4, h5, h6 { font-size: 100%;}
        .loading { background: url(images/loading.gif) 50% no-repeat;}
        .loading .sucaihuo-Wrap { opacity: 0;}
        .sucaihuo-Wrap { -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; transition: opacity 1s;}
        .ms-section { font-family: "Microsoft Yahei"; color: #fcfffc;}
        .ms-section { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
        .ms-section10 { background-color: #000;}
        .ms-left .ms-section1 { background-image: url(../../images/l1.jpg);}
        .ms-left .ms-section2 { background-image: url(../../images/l2.jpg);}
        .ms-left .ms-section3 { background-image: url(../../images/l3.jpg);}
        .ms-left .ms-section4 { background-image: url(../../images/l4.jpg);}
        .ms-left .ms-section4.down { background-image: url(../../images/l4-2.jpg);}
        .ms-left .ms-section5 { background-image: url(../../images/l5.jpg);}
        .ms-left .ms-section6 { background-image: url(../../images/l6.jpg);}
        .ms-left .ms-section7 { background-image: url(../../images/l7.jpg);}
        .ms-left .ms-section8 { background-image: url(../../images/l8.jpg);}
        .ms-left .ms-section9 { background-image: url(../../images/l9.jpg);}
        .ms-left .ms-section10 { background-image: url(../../images/l10.jpg);}
        .ms-right .ms-section1 { background-image: url(../../images/r1.jpg);}
        .ms-right .ms-section2 { background-image: url(../../images/r2.jpg);}
        .ms-right .ms-section3 { background-image: url(../../images/r3.jpg);}
        .ms-right .ms-section3.turnOn { background-image: url(../../images/r3-2.jpg);}
        .ms-right .ms-section4 { background-image: url(../../images/r4.jpg);}
        .ms-right .ms-section5 { background-image: url(../../images/r5.jpg);}
        .ms-right .ms-section6 { background-image: url(../../images/r6.jpg);}
        .ms-right .ms-section7 {  background-image: url(../../images/r7.jpg);}
        .ms-right .ms-section8 { background-image: url(../../images/r8.jpg);}
        .ms-right .ms-section9 { background-image: url(../../images/r9.jpg);}
        .ms-right .ms-section10 { background-image: url(../../images/r10.jpg);}
        .ms-left .ms-section1 h1 strong { line-height: 1.1em; font-size: 5em; text-transform: uppercase; text-shadow: -2px 2px 0 #a6acae;}
        .ms-left .ms-section1 h1 span { display: block;}
        .ms-section1 .txt { position: relative; left: -100%; top: 15%; opacity: 0; transition-duration: 0.5s;}
        .green-box { display: inline-block; margin-top: 30px; padding: 6px 10px; line-height: 1.2em; font-size: 2.5em; background: url(../../images/bg-greenbox.png) 0 0 repeat; *display: inline; zoom: 1;}
        .button { display: inline-block; margin-top: 30px; padding: 7px 73px 7px 25px; font-size: 1.5em; color: #fff; text-decoration: none; background: url(../../images/button.gif) right;}
        .button2 { padding: 7px 25px 7px 60px; background: url(../../images/button-left.gif) 0 no-repeat;}
        .ms-section .txt2 { position: relative; top: 20%; padding: 0 15%;}
        .ms-section .txt2 h2 { margin-bottom: 30px; font-size: 4em; line-height: 1.1em; text-shadow: -2px 2px 0 #a6acae; text-transform: uppercase;}
        .ms-section .txt2 h2 span { display: block;}
        .ms-section .txt2 h3 { margin: 20px 0; font-size: 2em;}
        .ms-section .txt2 p { font-size: 1.5em;}
        .ms-section2 .txt2 { position: absolute; left: 0; top: 75%; width: 100%; padding: 0; text-align: center;}
        .ms-left .txt2 { left: -100%; transition-duration: 0.5s;}
        .ms-right .txt2 { left: 100%; transition-duration: 0.5s;}
        .active .txt2 { left: 0; transition-delay: 1s;}
        .active .txt { left: 20%; opacity: 1; transition-delay: 1s;}
        #loading123 { position: absolute;left: 0; top: 0; width: 100%; height: 100%; background: #fff url(../../images/loading.gif) 50% no-repeat;}
    </style>
    <link rel="stylesheet" href="../../css/jquery.multiscroll.css">
    <script src="../../js/jquery-1.8.3.min.js"></script>
</head>
<body class="loading">
<div class="sucaihuo-Wrap">
    <div class="ms-left">
        <div class="ms-section ms-section1">
            <div class="txt">
                <h1><strong>汽车商城</strong></h1>
                <a class="button" href="/gotoyhBuy">全系魅力 尽在于此</a>
            </div>
        </div>
        <div class="ms-section ms-section2">
            <div class="txt2">
            </div>
        </div>
        <div class="ms-section ms-section3">
            <div class="txt2">
                <h2><strong>SKODA</strong></h2>
                <h3>驭风而行 一揽天地</h3>
                <a class="button btn3l" href="javascript:">Turn on</a>
            </div>
        </div>
        <div class="ms-section ms-section4">
        </div>
        <div class="ms-section ms-section5">
            <div class="txt2">
                <h2><strong>车辆对比</strong></h2>
                <a class="button" href="/gotoyhContrast">选出最适合您的车</a>
            </div>
        </div>
        <div class="ms-section ms-section6">
        </div>
        <div class="ms-section ms-section7">
            <div class="txt2">
                <h2><strong>Brabus</strong></h2>
            <a class="button" href="javascript:">不与平庸为伍</a>
        </div></div>
        <div class="ms-section ms-section8">
        </div>
        <div class="ms-section ms-section9">
            <div class="txt2">
                <h2><strong>Lorinser</strong></h2>
                <a class="button" href="javascript:">Perfect to touch</a>
            </div>
        </div>
        <div class="ms-section ms-section10">
        </div>
    </div>
    <div class="ms-right">
        <div class="ms-section ms-section1"></div>
        <div class="ms-section ms-section2">
            <div class="txt2">
                <h2><strong>预约试驾</strong></h2>
                <a class="button" href="/gotoyhBook">即刻体验</a>
            </div>
        </div>
        <div class="ms-section ms-section3"></div>
        <div class="ms-section ms-section4">
            <div class="txt2">
                <h2><strong>Audi</strong></h2>
                <p>开阔人生  无畏前行</p>
                <a class="button button2 btn42" href="javascript:">智能设置</a>
            </div>
        </div>
        <div class="ms-section ms-section5">

        </div>
        <div class="ms-section ms-section6">
            <div class="txt2">
                <h2><strong>购车计算器</strong></h2>
                <a class="button button2" href="/gotoyhCalculator">为您提供准确的全款购车费用信息</a>
        </div>
        </div>
        <div class="ms-section ms-section7"></div>
        <div class="ms-section ms-section8">
            <div class="txt2">
                <h2><strong>Mansory</strong></h2>
                <a class="button button2" href="javascript:">超越传统，竞无止境</a>
            </div>
        </div>
        <div class="ms-section ms-section9">
        </div>
        <div class="ms-section ms-section10">
            <div class="txt2">
                <h2><strong>OPEL</strong></h2>
                <a class="button button2" href="#">查看详情</a>
            </div>
        </div>
    </div>
</div>

<script src="../../js/jquery.easing.min.js"></script>
<script src="../../js/jquery.multiscroll.min.js"></script>
<script>
    $(function() {
        $('#sucaihuo-Wrap').multiscroll({
            verticalCentered: false
        });
        var $btn3l = $('.btn3l');
        $btn3l.on('click', function() {
            $('.ms-right').find('.ms-section3').toggleClass('turnOn');
            var $thisTxt = $(this).html();
            if ($thisTxt == 'Turn on') {
                $(this).html('Turn down');
            } else {
                $(this).html('Turn on');
            }
            return false;
        });
        $('.btn42').on('click', function() {
            $('.ms-left').find('.ms-section4').toggleClass('down');
            var $thisTxt = $(this).html();
            if ($thisTxt == '智能设置') {
                $(this).html('智能设置');
            } else {
                $(this).html('智能设置');
            }
            return false;
        });
    });
    //页面加载时的 Loading 效果
    $(window).load(function() {
        window.setTimeout(function() {
            $('body').removeClass('loading');
        }, 300);
    });
</script>
<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>

</body>
</html>